<template>
  <div id="tmpl">
    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="item in swipeList">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>
    <!-- 九宫格 -->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/news/newslist">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
  
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/photo/photolist">
            <span class="mui-icon mui-icon-email">
  
            </span>
            <div class="mui-media-body">图片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/goods/goodslist">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">商品购买</div>
          </router-link>
  
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/feedback">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">留言反馈</div>
          </router-link>
  
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/vide">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">视频专区</div>
          </router-link>
  
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/callme">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">联系我们</div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
  data() {
    return {
      swipeList: []
    }
  },
  created() {
    this.getSwipeList()
  },
  methods: {
    getSwipeList() {
      var url = 'http://182.254.146.100:8899/api/getlunbo'
      this.$http.get(url).then(function (res) {
        var data = res.body
        if (data.status != 0) {
          Toast(data.message)
          return
        }
        this.swipeList = data.message
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mint-swipe {
  height: 200px;
}

.mint-swipe-item img {
  width: 100%;
  height: 100%;
}

.mint-swipe-item {
  background-color: red;
  width: 100%;
  height: 300px;
}

.mui-table-view {
  background-color: #fff;
}

.mui-grid-view.mui-grid-9 {
  border-top: 0;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: 0;
}

.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 50px;
  background-repeat: round;
}
.mui-icon-home:before {
  background-image: url(../../static/imgs/1.png);
}
.mui-icon-email:before {
  background-image: url(../../static/imgs/2.png);
}
.mui-icon-chatbubble:before {
  background-image: url(../../static/imgs/3.png);
}
.mui-icon-location:before {
  background-image: url(../../static/imgs/4.png);
}
.mui-icon-search:before {
  background-image: url(../../static/imgs/5.png);
}
.mui-icon-phone:before {
  background-image: url(../../static/imgs/6.png);
}
</style>
